import 'package:awesome_dialog/awesome_dialog.dart';
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:pin_code_fields/pin_code_fields.dart';
import 'package:shenfuhui/config/config.dart';

import '../routers/routers.dart';
import '../views/dialog_manager.dart';

///
/// 收银台
///
class OrderCashier extends StatefulWidget {
  const OrderCashier({Key? key}) : super(key: key);

  @override
  State<OrderCashier> createState() => _OrderCashierState();
}

class _OrderCashierState extends State<OrderCashier> {
  var datas = [];
  int currentIndex = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    setState(() {
      datas.add("");
      datas.add("");
      datas.add("");
    });
  }

  ///
  /// 返回普通的列表item
  ///
  Widget getListItem(int index) {
    return InkWell(
      onTap: () {
        setState(() {
          currentIndex = index;
        });
      },
      child: Container(
        height: 100.w,
        width: double.infinity,
        padding: EdgeInsets.symmetric(vertical: 0.w, horizontal: 25.w),
        decoration: BoxDecoration(
          border: Border(
              bottom: BorderSide(width: 3.w, color: Config.colorDivider)),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              children: [
                ClipOval(
                  child: Container(
                      width: 55.w,
                      height: 55.w,
                      color: (Config.colorWhite),
                      padding: EdgeInsets.all(3.w),
                      child: const CircleAvatar(
                        backgroundImage:
                            AssetImage('assets/images/launcher.png'),
                      )),
                ),
                Padding(
                  padding: EdgeInsets.only(left: 20.w),
                ),
                Text(
                  "USDT支付",
                  style: TextStyle(
                    fontSize: 26.w,
                    color: Config.colorText1,
                  ),
                ),
              ],
            ),
            Opacity(
              //这个当作占位隐藏，不占位隐藏用Visibility
              opacity: currentIndex == index ? 1 : 0,
              child: Icon(
                Icons.check_circle_outline_outlined,
                size: 46.w,
                color: Config.colorMain,
              ),
            ),
          ],
        ),
      ),
    );
  }

  // _showBasicModalBottomSheet(context) async {
  //   return showModalBottomSheet<int>(
  //     isScrollControlled: false,
  //     context: context,
  //     backgroundColor: Colors.transparent,
  //     builder: (BuildContext context) {
  //       return Container(
  //         width: double.infinity,
  //         height: 440.w,
  //         padding: EdgeInsets.symmetric(vertical: 20.w, horizontal: 25.w),
  //         decoration: BoxDecoration(
  //           color: Colors.white,
  //           borderRadius: BorderRadius.only(
  //             topLeft: Radius.circular(15.w),
  //             topRight: Radius.circular(15.w),
  //           ),
  //         ),
  //         child: Column(
  //           children: [
  //             Text("请输入支付密码"),
  //             PinCodeTextField(
  //               appContext: context, //context
  //               length: 6, //输入的长度
  //               onChanged: (value) => print("onchange $value"), //变化回调
  //             )
  //           ],
  //         ),
  //       );
  //     },
  //   );
  // }

  _showDialogForPinInput(context) {
    AwesomeDialog(
      context: context,
      animType: AnimType.SCALE,
      dialogType: DialogType.NO_HEADER,
      body: Container(
        padding: EdgeInsets.only(top: 10.w, left: 20.w, right: 20.w),
        child: Column(
          children: [
            Text("请输入支付密码"),
            Padding(
              padding: EdgeInsets.only(top: 30.w),
            ),
            PinCodeTextField(
              appContext: context,
              length: 6,
              obscureText: true,
              // controller: textEditingController,
              inputFormatters: [
                FilteringTextInputFormatter.allow(RegExp(r'[0-9]'))
              ],
              onChanged: (value) => print("onchange $value"),
              onCompleted: (value) {
                print('oncompletd $value');
              },
              // pinTheme: PinTheme(
              //   shape: PinCodeFieldShape.box, //输入框的形状
              //   borderRadius: const BorderRadius.all(Radius.circular(10)),
              //   // 其他可以设置可以自己参考，比如有输入文字的时候输入框是什么颜色，不能输入的时候是什么颜色等
              // ),
            ),
          ],
        ),
      ),
      title: '',
      desc: '',
      btnOkText: '确定',
      btnOkOnPress: () {},
    ).show();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Config.colorBg2,
      appBar: AppBar(
        title: const Text('收银台'),
        centerTitle: true,
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                width: double.infinity,
                height: 100.w,
                padding: EdgeInsets.symmetric(vertical: 25.w, horizontal: 20.w),
                margin: EdgeInsets.fromLTRB(30.w, 30.w, 30.w, 0),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(12.w),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text(
                      "支付金额",
                      style:
                          TextStyle(fontSize: 26.sp, color: Config.colorText1),
                    ),
                    Padding(
                      padding: EdgeInsets.only(top: 5.w),
                    ),
                    Text(
                      "￥0.0000",
                      style:
                          TextStyle(fontSize: 26.sp, color: Colors.redAccent),
                    ),
                  ],
                ),
              ),
              Container(
                width: double.infinity,
                margin: EdgeInsets.only(top: 35.w, left: 30.w, right: 30.w),
                child: Text(
                  "请选择支付方式",
                  style: TextStyle(fontSize: 26.sp, color: Config.colorText1),
                ),
              ),
              Container(
                width: double.infinity,
                height: 300.w,
                margin: EdgeInsets.symmetric(vertical: 30.w, horizontal: 30.w),
                decoration: BoxDecoration(
                  color: (Config.colorWhite),
                  borderRadius: BorderRadius.circular(12.w),
                ),
                child: ListView.builder(
                  itemCount: datas.length,
                  scrollDirection: Axis.vertical,
                  itemBuilder: (BuildContext context, int index) {
                    return getListItem(index);
                  },
                ),
              ),
              Container(
                width: 670.w,
                height: 84.w,
                margin: EdgeInsets.fromLTRB(35.w, 35.w, 35.w, 0),
                child: ElevatedButton(
                  clipBehavior: Clip.antiAlias,
                  onPressed: () async {
                    // int selectedIndex =
                    //     (await _showBasicModalBottomSheet(context)) as int;
                    // print("自定义底部弹层：选中了第$selectedIndex个选项");
                    _showDialogForPinInput(context);
                  },
                  style: ElevatedButton.styleFrom(shape: const StadiumBorder()),
                  child: const Text('确认付款'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
